正则表达式 - 验证只可输入数字和最多保留两位小数（坑）

最新推荐文章于 2024-04-22 16:07:26 发布

Hsu yiqi

最新推荐文章于 2024-04-22 16:07:26 发布

阅读量1.2w

点赞数 6

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_44791115/article/details/106473098

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天温习正则表达式的时候发现一件神奇的事情…

*前言：在浏览器验证正则字符时，如果输入的是数字带小数点后面不再输入数字，那么浏览器会自动截取掉小数点，即：输入"1."，浏览器会处理成"1"

唔…因此当我为求方便直接在浏览器中输出表达式时就踩坑了 = =

首先我先写了一个验证最多可保留两位小数的正则：
var reg = /^\d+(.\d{1,2})?$/;
\d：0-9的数字
^\d：以0-9数字开头的表达式
^\d+：以一至多个0-9数字开头的表达式
( )：括号里是一个整体
(.\d{1,2})：. 小数点、d{1,2} 一至两位数字
(.\d{1,2})?：小数（小数点 + 一至两位小数）限制出现零到一次
(.\d{1,2})?$：若存在小数点，则以小数点后的一至两位小数结尾

在页面中写一个输入框和点击按钮，测试校验是否成功：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="test" >
    <button onclick="review()" id="btn">onclick</button>

    <script>
        var input = document.getElementById('test');
        var reg = /^\d+(.\d{1,2})?$/;

        function review(){
            console.log(input.value)
            console.log(reg.test(input.value))
        }
    </script>

</body>
</html>

浏览器F12打开控制台查看效果：
在这里插入图片描述
可以看到输入框输入1.后正常检验是false，然而如果在浏览器中输入校验规则和字符串则不然：

如果输入个带小数点的数字，后面又不再输入数字时，浏览器会自动忽略掉小数点，因而检验"1."类似的格式相当于校验“1”，结果自然是true。

仅记录为主，若有什么错误还望包涵指出。

Hsu yiqi

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
正则表达式 - 验证只可输入数字和最多保留两位小数（坑）

今天温习正则表达式的时候发现一件神奇的事情…*前言：在浏览器验证正则字符时，如果输入的是数字带小数点后面不再输入数字，那么浏览器会自动截取掉小数点，即：输入"1."，浏览器会处理成"1"唔…因此当我为求方便直接在浏览器中输出表达式时就踩坑了 = =首先我先写了一个验证最多可保留两位小数的正则：var reg = /^\d+(.\d{1,2})?$/;\d：0-9的数字^\d：以0-9数字开头的表达式^\d+：以一至多个0-9数字开头的表达式( )：括号里是一个整体(.\d{1,2})：.
复制链接

扫一扫